<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="description" content="" />
	<meta name="keywords" content="" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />
	<link type="text/css" rel="stylesheet" href="css/weui.min.css"/>
	<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css"/>
	<style>
		.border-right{ border-right:1px solid #e7e7e7}
		.main{ overflow:hidden; padding:13px 7px 71px 7px}
		.main .col-xs-12{ overflow:hidden; padding-left:7px; padding-right:7px}
		.main .col-xs-12 .panel{ margin-bottom:13px}
		.avatar{ width:32px; height:32px}
		.media>*{ vertical-align:middle}
		.create-time{ min-width:80px; word-break:keep-all}
		.weui_tabbar{ z-index:1}
		.weui_tabbar_label{ margin-bottom:0}
		.upload_zone{ width:100%; min-height:77px; position:relative; margin-bottom:9px}
		.upload_zone>.weui_uploader_input_wrp{ float:none; position:absolute; left:50%; margin-left:-38px}
		.weui_toast{ top:150px}
		.weui_tabbar_item .glyphicon{ color:#888}
		.weui_bar_item_on .glyphicon{ color:#09bb07}
		.giant_screen{ position:fixed; top:0; right:0; bottom:0; left:0; background-color:#fff; padding:20px; z-index:1040}
		.giant_screen_right{ position:static}
		.giant_screen_pic{ text-align:left}
		.giant_screen_pic:last-child{ text-align:right}
		.giant_screen_pic>img{ display:inline; max-height:100%; opacity: 0; -webkit-animation: pic-in 1s ease-out 0.1s 1 forwards; -moz-animation: pic-in 1s ease-out 0.1s 1 forwards}
		.giant_screen_title{ opacity: 0; -webkit-animation: name-in 0.7s ease-out 0.3s 1 forwards; -moz-animation: name-in 0.7s ease-out 0.3s 1 forwards; padding-bottom:64px}
		.giant_screen_row{ position:relative; height:100%}
		.giant_screen_row .col-sm-6{ height:100%}
		.giant_screen_row .media{ position:absolute; right:15px; bottom:0; left:50%; opacity: 0; -webkit-animation: name-in 0.7s ease-out 0.3s 1 forwards; -moz-animation: name-in 0.7s ease-out 0.3s 1 forwards}
		.giant_screen_row .giant_screen_left .media{ left:15px; right:50%}
		.giant_screen_row .avatar{ width:64px; height:64px}

		@media (min-width:768px) {
			.main{ padding:65px 7px 0 7px}
		}

		@-webkit-keyframes 'name-in'
		{
		0%   {opacity: 0;-webkit-transform:translate(0px,-50px);}
		100% {opacity: 1;-webkit-transform:translate(0px,0px);}
		}
		@-moz-keyframes name-in
		{
		0%   {opacity: 0;-moz-transform:translate(0px,-50px);}
		100% {opacity: 1;-moz-transform:translate(0px,0px);}
		}

		@-webkit-keyframes 'pic-in'
		{
		0%   {opacity: 0;}
		100% {opacity: 1;}
		}
		@-moz-keyframes pic-in
		{
		0%   {opacity: 0;-moz-transform:translate(-50px,0px);}
		100% {opacity: 1;-moz-transform:translate(0px,0px);}
		}

	</style>
	<title>照片墙</title>
</head>
<body>
<div id="wrapper"></div>
<input id="userId" type="hidden" value="111">
<div id="toast" style="display: none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <i class="weui_icon_toast"></i>
        <p class="weui_toast_content">已完成</p>
    </div>
</div>
<div id="loadingToast" class="weui_loading_toast" style="display:none;">
    <div class="weui_mask_transparent"></div>
    <div class="weui_toast">
        <div class="weui_loading">
            <div class="weui_loading_leaf weui_loading_leaf_0"></div>
            <div class="weui_loading_leaf weui_loading_leaf_1"></div>
            <div class="weui_loading_leaf weui_loading_leaf_2"></div>
            <div class="weui_loading_leaf weui_loading_leaf_3"></div>
            <div class="weui_loading_leaf weui_loading_leaf_4"></div>
            <div class="weui_loading_leaf weui_loading_leaf_5"></div>
            <div class="weui_loading_leaf weui_loading_leaf_6"></div>
            <div class="weui_loading_leaf weui_loading_leaf_7"></div>
            <div class="weui_loading_leaf weui_loading_leaf_8"></div>
            <div class="weui_loading_leaf weui_loading_leaf_9"></div>
            <div class="weui_loading_leaf weui_loading_leaf_10"></div>
            <div class="weui_loading_leaf weui_loading_leaf_11"></div>
        </div>
        <p class="weui_toast_content">数据加载中</p>
    </div>
</div>
<script type="text/javascript" src="js/jQuery-2.1.4.min.js"></script>
<script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
<script src="https://npmcdn.com/imagesloaded@4.1/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript" src="js/underscore.min.js"></script>
<script type="text/javascript" src="js/backbone.min.js"></script>
<script type="text/javascript" src="js/react.js"></script>
<script type="text/javascript" src="js/react-dom.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>